<template>
  <div o-Container>
    <o-list v-bind:source="list.function" v-bind="{created:create,modified:modify}"/>
    <o-dialog v-bind:source="panel" v-bind="{opened:load,closed:load}">
      <template slot="content">
        <o-item v-bind:source="item.function" v-bind="{saved:save,backed:back,loaded:load}"></o-item>
        <!--            {{authCheckData}}-->
        <div class="OctopusItem">
          <div class="Content">
            <el-tabs v-model="systemTab">
              <el-tab-pane v-for="system in menuData.data.queryData" v-if="system.ParentID == 0"
                           v-bind="{label:system[octopus.passport.language],name:'sys_'+system.ID}"
                           :key="system.ID">
                <div class="AuthTable">
                  <table>
                    <tr v-for="(menu,menuIndex) in menuData.data.queryData" class="Item"
                        :key="menuIndex" v-if="menu.SystemID == system.ID && menu.ID != system.ID">
                      <td v-bind:class="'Name Level_' + menu.ParentLevel">
                        {{menu[octopus.passport.language]}}
                      </td>
                      <td class="ListData">
                        <el-checkbox v-for="auth in authData.data.queryData" :label="menu.ID+'_'+auth.ID"
                                     :key="menu.ID+auth.ID" border v-model="authCheckData[menu.ID+'_'+auth.ID]"
                                     @change="checkAuth"
                                     v-if="(menu.AuthorizationList+'').indexOf(auth.Code) > -1 && reloadAuth">
                          {{auth.Name}}
                        </el-checkbox>
                      </td>
                    </tr>
                  </table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </template>
    </o-dialog>
  </div>
</template>

<script>
  export default {
    name: "mms_platform_function_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        systemTab: '',
        menuData: {data: {}},
        authData: {data: {}},
        authCheckData: {}, // 选中的菜单+权限数据，默认选中值如下所示。
        reloadAuth: true, // 是否启用菜单
        list: {
          function: {
            data: {
              id: 45, // 功能包数据源ID
              cellData: [
                // {name: "SystemID", width: 100, searchKey: "=", link: [{ mapping: "ParentID",value:0}]},// 此模式不是关联模式，单纯数据过滤
                {name: "Name", width: 300},//名称
                {name: "Sort", width: 80,},//排序
                {name: "AuthorizationList", width: 2500},//权限列表
                {name: "Note", width: 100,},//备注
                {name: "CreateDate", width: 160,},//创建时间
              ],
              paramData: {},
            }
          },
        },
        item: {
          function: {
            // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
            data: {
              id: 45,
              value: "",
              cellData: [
                {name: "ParentID"},//父级
                {name: "Name"},//名称
                {name: "Sort"},//排序
                {name: "CreateDate"},//创建时间
                {name: "Note"},//备注
                {name: "AuthorizationList", show: true}, // 调试时打开
              ]
            },
          },
        },
        panel: {
          visible: false,
        },
      }
    },
    created: function () {
      this.init();
    },
    methods: {
      create: function () {//新增
        this.loadData(null);
      },
      modify: function (row) {//修改
        this.loadData(row.ID);
      },
      // 重载的加载数据，不是监听的load。
      loadData: function (value) {
        this.panel.visible = true;
        // 清空所选项目，加载后会重新绑定该属性
        this.authCheckData = {};
        this.reloadAuth = true;
        this.item.function.data.value = value;
        this.item.function.control.load();
      },
      init: function () {//初始化
        const cellData = this.list.function.data.cellData;
        // 遍历 cellData，找到符合条件的元素，并添加键值对
        cellData.forEach(item => {
          if (item.name === "CompanyID") {
            // 添加 filterKey 和 filterValue
            item.filterKey = '=';
            item.filterValue = this.octopus.passport.authorization.company == 1 ? '' : this.octopus.passport.authorization.company;
          }
        });
        this.initAuth();
      },
      initAuth: function () {//初始化权限
        let o = this;
        // 请求后台八爪鱼API框架。
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 46, // 权限数据源
            cellData: [
              {name: "Name"},
              {name: "Code"},
            ],
            pageData: {
              index: 1, listSize: 10, rowSize: 7777 // 菜单全部加载。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              o.$set(o.authData, "data", data.content);
              o.initMenu();
            } else {
              o.octopus.tips.error(data);
            }
          });
      },
      initMenu: function () {
        let o = this;
        // 请求后台八爪鱼API框架。
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 133, // 菜单数据源、系统用
            cellData: [
              {name: this.octopus.passport.language},
              {name: "SystemID"},
              {name: "LanguageID"},
              {name: "ParentID"},
              {name: "AuthorizationList"},
            ],
            pageData: {
              index: 1, listSize: 10, rowSize: 7777 // 菜单全部加载。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              o.$set(o.menuData, "data", data.content);
              // o.initAuth();
            } else {
              o.octopus.tips.error(data);
            }
          });
      },
      save: function (data) {
        this.octopus.tips.success(data);
        // 刷新list
        this.list.function.control.load();
        this.back();
      },
      back: function () {
        this.reloadAuth = false;

        this.panel.visible = false;
      },
      load: function (data) {
        let o = this;
        // 获取对象及赋值。
        if (!this.octopus.tools.IsNullOrEmpty(data.content.value)) {
          let AuthDataColumn = $.grep(data.content.cellData, function (value) {
            return value.name == "AuthorizationList";//筛选出当前数据列数据
          });
          if (AuthDataColumn) {
            let aData = AuthDataColumn[0];
            $(aData.defaultValue || []).each(function (index, item) {
              if (!o.octopus.tools.IsNullOrEmpty(item)) {
                o.$set(o.authCheckData, item, true);
              }
            });
          }
        }
        // 因为弹出是请求数据之前，所以500毫秒足以。
        setTimeout(function () {
          // 如果面板是打开状态
          if (o.panel.visible == true) {
            o.systemTab = "sys_1";
          }
        }, 500);
      },
      checkAuth: function (data) {
        let FunctionAuthData = [];
        for (let code in this.authCheckData) {
          let ac = this.authCheckData[code];
          if (ac) {
            FunctionAuthData.push(code);
          }
        }

        // 赋值
        $(this.item.function.data.cellData).each(function (index, item) {
          if (item.name == "AuthorizationList") {
            item.defaultValue = FunctionAuthData;
          }
        });

      }
    },
    props: ["oData"]
  }
</script>

